<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div slot="header">
        <span>编辑产品分类</span>
      </div>
      <el-form
        :model="productClassForm"
        :rules="productClassFormRules"
        ref="productClassFormRef"
        label-width="100px"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="productClassForm.name"></el-input>
        </el-form-item>
        <el-form-item label="分类级别" prop="level">
          <el-select
            v-model="productClassForm.level"
            placeholder="请选择"
            filterable
            clearable
            @change="changeLevel"
            disabled
          >
            <el-option
              key="1"
              label="一级分类"
              :value="typeof productClassForm.level == 'string' ? 1 + '' : 1"
            >
            </el-option>
            <el-option
              key="2"
              label="二级分类"
              :value="typeof productClassForm.level == 'string' ? 2 + '' : 2"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="上级分类"
          prop="up_code"
          v-show="productClassForm.level == 2"
          :rules="
            productClassForm.level == 2
              ? {
                  required: true,
                  message: '请选择',
                  trigger: 'change'
                }
              : { required: false }
          "
        >
          <el-select
            v-model="productClassForm.up_code"
            placeholder="请选择"
            filterable
            clearable
            disabled
          >
            <el-option
              v-for="item in firstClasses"
              :key="item.id"
              :label="item.name"
              :value="
                typeof productClassForm.up_code == 'string'
                  ? item.id + ''
                  : item.id
              "
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="productClassForm.remark"
            show-word-limit
            maxlength="500"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="$router.push('/product/classification')">
            取 消
          </el-button>
          <el-button class="theme-background-color" @click="saveProductInfo"
            >保 存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productClassForm: {},
      firstClasses: [],
      productClassFormRules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        level: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  created() {
    this.productClassForm = this.$route.query
    this.changeLevel()
  },
  methods: {
    async changeLevel() {
      // console.log(this.productClassForm)
      if (parseInt(this.productClassForm.level) === 2) {
        const { data: res } = await this.$http.post('/admin/data/find', {
          code: 'product_type',
          level: 1
        })
        if (res.meta.status !== 200) {
          return this.$message.error('查询上级分类失败')
        }
        this.firstClasses = res.data.product_type
      }
    },
    // 点击按钮，添加产品
    saveProductInfo() {
      this.$refs.productClassFormRef.validate(async (valid) => {
        console.log(valid)
        if (!valid) return

        // 修改的请求
        const { data: res } = await this.$http.post(
          '/admin/product/modifyType',
          this.productClassForm
        )
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.$router.push('/product/classification')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
}
.el-select,
.el-date-editor {
  width: 400px !important;
}
</style>
